<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="25%"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="被代理人" prop="principal">
          <el-input v-model="formData.principal" style="width: 80%" />
        </el-form-item>
        <el-form-item label="代理人" prop="agent">
          <el-input v-model="formData.agent" style="width: 80%" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuStatus">
          <el-radio-group v-model="formData.menuStatus" class="ml-4">
            <el-radio label="1">全权代理</el-radio>
            <el-radio label="2">协同代理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            style="width: 80%"
            v-model="formData.startTime"
            type="datetime"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            style="width: 80%"
            v-model="formData.endTime"
            type="datetime"
          />
        </el-form-item>
        <el-form-item label="事项表单">
          <el-checkbox v-model="formData.eventForm" />
        </el-form-item>
        <el-form-item label="表单模板">
          <el-checkbox
            v-model="formData.formTemplateCheck"
            style="margin-right: 10px"
          />
          <el-select
            v-model="formData.formTemplate"
            style="width: 72%"
            @change="formTemplateChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <ChooseForm ref="chooseFrom" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import ChooseForm from "./chooseForm.vue";

const props = defineProps(["title"]);

const chooseFrom = ref(null); //定义子组件

const dialogVisible = ref(false);
const formData = reactive({
  principal: "",
  agent: "",
  menuStatus: "1",
  startTime: "",
  endTime: "",
  eventForm: "",
  formTemplateCheck: "",
  formTemplate: ""
});
const options = [
  {
    label: "全部",
    value: 1
  },
  {
    label: "选择单据模板",
    value: 2
  }
];
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  principal: [{ required: true, message: "请输入被代理人!", trigger: "blur" }],
  agent: [{ required: true, message: "请输入代理人!", trigger: "blur" }],
  menuStatus: [{ required: true, message: "请选择菜单状态!", trigger: "blur" }],
  startTime: [{ required: true, message: "请选择开始时间!", trigger: "blur" }],
  endTime: [{ required: true, message: "请选择结束时间!", trigger: "blur" }]
});

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定关闭弹窗嘛?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const formTemplateChange = val => {
  if (val == 2) {
    chooseFrom.value.dialogVisibleInner = true;
  }
};

function cancel() {
  this.dialogVisible = false;
}

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible
});
</script>

<style scoped></style>
